
<template>
    <div class="person">
       姓：<input v-model="firstName" />
       <br/>
       名：<input v-model="lastName"/>
       <br/>
       全名：<input v-model="fullName"/>

       <button @click="changeFullName">修改全名</button>
    </div>
</template>

<script setup lang="ts" name="person">
//现在 vue3 使用 ref 或者是 reactive 来包裹对象实现对象的响应式，来替代之前的所有的写在data 中的写法
import { ref ,computed } from 'vue'

let firstName = ref("张");
let lastName  = ref('三');

//全名需要计算出来,但是这样写，控制台会有提醒 这个是只读
//[Vue warn] Write operation failed: computed value is readonly
/**
let fullName = computed(()=>{
    return firstName.value +"-" + lastName.value
})
 **/

 /**
  * 这样写的 computed 计算属性 即可以读取又可以修改
  ***/
 let fullName = computed({
    get(){
        return firstName.value + "-" + lastName.value;
    },
    set(val){
        console.log('有人修改了full name ',val)
        //在这里是不能直接修改 full name的，如果直接修改 会栈溢出
        firstName.value = val.split('-')[0]
        lastName.value = val.split('-')[1]
    }
 })

 function changeFullName(){
    fullName.value = 'li-si';
 }


</script>

<style lang="css">
/** .person {
    margin-left: 5px;
    width: 90%;
    background-color: aqua;
} **/
</style>